<template>
<div class='container articles'>
   <el-card>
      <page-tools :show-before="true">
      <template v-slot:before>
   <el-row type="flex" justify="end" >
     <el-form label-width="60px">
       <el-col>
         <el-row type="flex" justify="space-between">
           <el-col>
             <el-form-item label="关键字" >
              <el-input
               v-model="page.keyword"
                style="font-size:12px;height:18px"
                 placeholder="根据文章标题搜索"
                 @keyup.enter.native="search"
                 ></el-input>
              </el-form-item>
           </el-col>
           <el-col>
              <el-form-item label="状态">
                <el-select v-model="page.state" placeholder="请选择" @click="select">
                  <el-option value="1" label="启用">启用 </el-option>
                  <el-option value="0" label="禁用">禁用 </el-option>
                </el-select>
            </el-form-item>
           </el-col>
           <el-col>
            <el-form-item>
              <el-button size="small" style="margin-left:10px" @click="clear">清除</el-button>
            <el-button size="small" type="primary" @click="search">搜索</el-button>
            </el-form-item>
           </el-col>
         </el-row>
       </el-col>
     </el-form>
   </el-row>
    </template>
    <template v-slot:after>
      <el-button @click="showDialog=true"  icon="el-icon-edit" type="success" size="small">新增技巧</el-button>
    </template>
  </page-tools>
    <el-alert
    type="info"
    show-icon>
    数据一共{{this.page.total}}条
  </el-alert>
  <!-- ------------ -->
  <!-- 表格数据 -->
  <el-table :data="list" style="top:10px">
    <el-table-column label="序号" type="index"></el-table-column>
     <el-table-column prop="title" label="文章标题" ></el-table-column>
     <el-table-column prop="visits" label="阅读数" ></el-table-column>
     <el-table-column  prop="username" label="录入人" ></el-table-column>
     <el-table-column  prop="createTime" label="录入时间" >
       <template v-slot="{row}">
          {{row.createTime | formatDate}}
       </template>
     </el-table-column>
     <el-table-column  prop="state" label="状态" >
       <template slot-scope="{row}">
         <span v-if="row.state===1">启用</span>
         <span v-else>禁用</span>
       </template>
     </el-table-column>
     <el-table-column label="操作" >
       <template slot-scope="{row}">
       <el-button type="text" @click="articleDetail(row.id)">预览</el-button>
       <el-button type="text" v-if="row.state===1" @click="disabled(row)">禁用</el-button>
       <el-button type="text" v-else @click="start(row)">启用</el-button>
       <el-button type="text" :disabled="row.state===1" @click="detail(row.id)">修改</el-button>
       <el-button type="text" :disabled="row.state===1" @click="delArticle(row.id)">删除</el-button>
       </template>>
     </el-table-column>
  </el-table>
  <!-- 表格数据 -->
  <!-- 分页数据 -->
    <el-row align="middle" style="margin-top:20px" type="flex" justify="center">
      <el-pagination
    :current-page="page.page"
    :page-size="page.pagesize"
    :total="page.total"
    layout="prev, pager, next"
    @current-change="changePage"
    >
  </el-pagination>
    </el-row>
   </el-card>
   <!-- 添加编辑文章弹出层 -->
   <el-dialog @close="btnCancel" title="添加编辑文章" :visible="showDialog">
    <template >
      <el-form :model="article" label-width="120px">
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="article.title" style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="articleBody">
          <!-- 富文本编辑器 -->
            <quill-editor v-model="article.articleBody"  style="width:80%" />
        </el-form-item>
        <el-form-item label="视频地址" prop="videoURL">
           <el-input v-model="article.videoURL" style="width:80%" placeholder="请输入内容">
         <!-- <template slot="prepend">Http://</template> -->
          </el-input>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-button type="primary" size="small" @click="btnOK">确定</el-button>
          <el-button  size="small" @click="btnCancel">取消</el-button>
        </el-col>
      </el-row>
     <!-- <quill-editor ref="text" v-model="content" class="myQuillEditor" :options="editorOption" /> -->
     <!-- <el-button type="primary" @click="submit">提交</el-button> -->
    </template>
   </el-dialog>
   <!-- 添加编辑文章弹出层 -->
  <!-- 预览弹出层 -->
  <el-dialog @close="btnArticleCancel" title="预览文章" :visible="articleShowDialog">
    <h2>{{this.article.title}}</h2>
    <div>
      <span>{{this.article.createTime | formatDate }} </span>
      <span> 超级管理员</span>
    </div>
    <div class="articleBody" v-html="this.article.articleBody">
    </div>
  </el-dialog>
  <!-- 预览弹出层 -->
  </div>
</template>

<script>
import { list, add, remove, detail, update, changeState } from '@/api/hmmm/articles'
// import { formatDate } from '@/filters'

import { quillEditor } from 'vue-quill-editor' // 富文本编辑器
import 'quill/dist/quill.core.css' // 富文本编辑器的样式文件
import 'quill/dist/quill.snow.css' // 富文本编辑器的样式文件
import 'quill/dist/quill.bubble.css' // 富文本编辑器的样式文件
export default {
  // 组件名称
  name: 'Articles',
  // 局部注册的组件
  components: {
    quillEditor
  },
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data () {
    return {
      article: {
        title: '', // 文章标题
        articleBody: '', // 文章正文
        videoURL: '' // 视频地址
      },
      showDialog: false, // 修改添加文章弹出层
      list: [], // 接收列表数组
      page: {
        page: 1, // 当前页数
        pagesize: 10, // 每页数量
        total: 0, // 总数
        keyword: '', // 关键字
        state: '1' // 状态 1 开启 0 屏蔽
      },
      value: '',
      options: [{
        value: '启用',
        label: '禁用'
      }],
      articleShowDialog: false // 控制预览文章的弹出层
    }
  },
  // 计算属性
  computed: {

  },
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created () {
    this.ArticliList()
    // this.simple()
  },
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted () {},
  // 组件方法
  methods: {
    select () {
      console.log(this.page.state)
    },
    // 文章的简单列表
    // async simple () {
    //   // const result = await simple()
    // },
    // 获取列表数据
    async ArticliList () {
      const { data } = await list({ page: this.page.page, pagesize: this.page.pagesize, keyword: this.page.keyword, state: this.page.state })
      this.list = data.items
      this.page.total = data.counts // 总数量
      this.page.page = parseInt(data.page) // 当前页码
      this.page.pagesize = parseInt(data.pagesize) // 每页数量
    },
    // 修改分页数据
    changePage (newPage) {
      this.page.page = newPage // 将最新页码赋值给page.page
      this.ArticliList() // 重新拉取数据
    },
    // 关闭弹出层
    btnCancel () {
      this.article = {
        title: '', // 文章标题
        articleBody: '', // 文章正文
        videoURL: '' // 视频地址
      }
      this.showDialog = false
    },
    // 添加文章按钮
    async btnOK () {
      try {
        if (this.article.id) {
          await update({ id: this.article.id, title: this.article.title, articleBody: this.article.articleBody, videoURL: this.article.videoURL })
          this.$message.success('修改操作成功')
        } else {
          await add(this.article)
          this.$message.success('添加操作成功')
        }
        this.ArticliList() // 重新拉取数据
        this.showDialog = false
      } catch (error) {
        console.log(error)
      }
    },
    // 删除文章
    async delArticle (id) {
      await this.$confirm('确认删除吗？')
      await remove({ id: id }) // 执行删除方法
      this.ArticliList() // 重新拉取数据
      this.$message.success('删除成功')
    },
    // 点击修改获取文章的详情
    async detail (id) {
      const { data } = await detail({ id: id }) // 根据id 调用获取文章详情的方法
      this.article = data // 将数据赋值给article
      this.showDialog = true // 显示弹出层
    },
    // 关闭文章预览
    btnArticleCancel () {
      this.articleShowDialog = false
    },
    // 文章预览
    async articleDetail (id) {
      this.articleShowDialog = true
      const { data } = await detail({ id: id }) // 根据id 调用获取文章详情的方法
      this.article = data // 将数据赋值给article
      console.log(data)
    },
    // 清除
    clear () {
      this.page.keyword = ''
      this.page.state = '1'
      this.ArticliList() // 重新拉取数据
    },
    // 搜索
    async search () {
      this.ArticliList() // 重新拉取数据
    },
    // 启用
    async start (row) {
      row.state = 1
      await changeState({ id: row.id, state: row.state })
    },
    // 禁用
    async disabled (row) {
      row.state = 0
      await changeState({ id: row.id, state: row.state })
    }
  }
}
</script>

<style scoped >
.articles{
  padding: 10px;
}
  h2{
    margin: 0px;
  }
  .articleBody{
    background-color: #f5f5f5;
    border-top: 1px dashed #d4d4d4;
    margin-top: 10px;
    padding: 5px;
  }
</style>
